<div class="shelf">
<div class="preformatted">                                           ____
                                        .-" +' "-.
                       /)              /.'.'A_'*`.\
              /\___/\ ((              |:.*'/\-\. ':|
              \`@_@'/  ))             |:.'.||"|.'*:|
              {_:Y:.}_//               \:~^~^~^~^:/
 _____________{_}^-'{_}_________________/`-....-'\______
||-------------------------------------`-.,____,.-'----||
||.--.   .-._                       .----.             ||
|||==|___|o|~|___           .---.___|""""|_____.--.___ ||
|||  |===|l|P|xxx|_         |+++|=-=|_  _|-=+=-|==|---|||
|||==|kim|i|O|   | \        |   |   |_\/_| LiY |so| ^ |||
|||  |dun|v|O|   |\ \       |   |=-=|_/\_|-=+=-|se| ^ |||
|||  |   |e|H|   |_\ \______|   |   |    | Lee |ki| ^ |||
|||==|===|r|~|xxx|  \ \     |+++|=-=|""""|-=+=-|==|---|||
||`--^---'-^-^---'   `-'    '---^---^----^-----^--^---^||
||-----------------------------------------------------||
||-----------------------------------------------------||
||              ___                  .-.------.  .----.||
||             |===| .--.   __   .---| |<(**)>|__|^^^^|||
||      ,_,   (|   |_|II|__|''|__|:x:|=|      |==|    |||
||     (.,.)  (|===|+|  |++|  |==|   | |Ursula|of|-pln|||
||     (   )  (|===|-|  |  |''|  |:x:|=|k.  le|KI|wssr|||
||______"-"___(|   |-|  |  |  |  |   | | Guin |EU|    |||
||            (|===|+|[]|++|''|==|:x:|=|<(**)>|==|^^^^|||
||             `---^-^--^--^--'--^---^-^-^----^--^----^||
||-----------------------------------------------------||
||_____________________________________________________||
</div>
2026
<br><br><br><div class="preformatted">
                     .-""-.           
                    ;  .-. ;      oo 
                 _.('.__.' :-..__//
           __...i".._'-.__.'_.._.-"~~--...__
         //               `V'               \\ 
        //                 |                 \\ 
       //__...--~~~~~~-._  |  _.-~~~~~~--...__\\ 
      //__.....----~~~~._\ | /_.~~~~----.....__\\
      ===================\\|//===================

</div>

<div class="book-list">
<!-- TEMPLATE
  <div class="book-row reading read fav manga">
    <div class="work">title</div>
    <div class="author">name</div>
  </div>
END of TEMPLATE -->

  <div class="book-row read">
    <div class="work">beloved</div>
    <div class="author">Toni Morrison</div>
  </div>

  <div class="book-row read">
    <div class="work">cún & đời thế mà vui</div>
    <div class="author">Nguyễn Huy Thiệp</div>
  </div>

  <div class="book-row fav">
    <div class="work">con gái thủy thần</div>
    <div class="author">Nguyễn Huy Thiệp</div>
  </div>

  <div class="book-row reading">
    <div class="work">Knocking on heaven's door</div>
    <div class="author">Katy Butler</div>
  </div>

  <div class="book-row reading">
    <div class="work">The Best of Brevity</div>
    <div class="author">Zoë Bossiere</div>
  </div>

  <div class="book-row reading">
    <div class="work">The Art of Solitude</div>
    <div class="author">Stephen Batchelor</div>
  </div>

  <div class="book-row reading">
    <div class="work">Journey to the West</div>
    <div class="author">Wu Cheng'en</div>
  </div>

  <div class="book-row read">
    <div class="work">The Friend</div>
    <div class="author">Sigrid Nunez</div>
  </div>

  <div class="book-row fav">
    <div class="work">The Eighth Day</div>
    <div class="author">Mitsuyo Kakuta</div>
  </div>

  <div class="book-row reading">
    <div class="work">Still Writing</div>
    <div class="author">Dani Shapiro</div>
  </div>

  <div class="book-row fav">
    <div class="work">A Three Dog Life</div>
    <div class="author">Abigail Thomas</div>
  </div>

  <div class="book-row manga">
    <div class="work">Puella Magi Madoka Magica<br>Wraith Arc</div>
    <div class="author">Magica Quartet</div>
  </div>

  <div class="book-row manga">
    <div class="work">Puella Magi Madoka Magica:<br>The Different Story</div>
    <div class="author">Magica Quartet</div>
  </div>

  <div class="book-row manga">
    <div class="work">Puella Magi Madoka Magica</div>
    <div class="author">Magica Quartet</div>
  </div>

  <div class="book-row fav">
    <div class="work">How to be sick</div>
    <div class="author">Toni Bernhard</div>
  </div>

  <div class="book-row reading">
    <div class="work">How to Say Goodbye</div>
    <div class="author">Wendy MacNaughton</div>
  </div>

  <div class="book-row read">
    <div class="work">Suicide</div>
    <div class="author">Edouard Levé</div>
  </div>

  <div class="book-row reading">
    <div class="work">The God of Small Things</div>
    <div class="author">Arundhati Roy</div>
  </div>

  <div class="book-row fav">
    <div class="work">the essential haiku</div>
    <div class="author">robert hass</div>
  </div>

  <div class="book-row manga">
    <div class="work">Forbidden Scrollery </div>
    <div class="author">zun</div>
  </div>

  <div class="book-row reading">
    <div class="work">dew on the grass</div>
    <div class="author">Makoto Ueda</div>
  </div>

  <div class="book-row manga">
    <div class="work">Kagurabachi </div>
    <div class="author">Takeru Hokazono</div>
  </div>  

  <div class="book-row fav">
    <div class="work">mẫu thượng ngàn</div>
    <div class="author">nguyễn xuân khánh</div>
  </div>

  <div class="book-row reading">
    <div class="work">waking up</div>
    <div class="author">sam harris</div>
  </div>

  <div class="book-row fav">
    <div class="work">đêm qua sân trước một cành mai</div>
    <div class="author">nguyễn tường bách</div>
  </div>  

  <div class="book-row fav">
    <div class="work">Deep River</div>
    <div class="author">Shūsaku Endō</div>
  </div>

  <div class="book-row fav">
    <div class="work">Babel:<br>Or the Necessity<br>of Violence</div>
    <div class="author">R. F. Kuang</div>
  </div>

</div>

--- 
2025

<div class="book-list">

  <div class="book-row manga">
    <div class="work">Beastars</div>
    <div class="author">Paru Itagaki</div>
  </div>

  <div class="book-row reading">
    <div class="work">A Monastery Within</div>
    <div class="author">Gil Fronsdal</div>
  </div>

  <div class="book-row read">
    <div class="work">Weaving on a Little Loom</div>
    <div class="author">Fiona Daly</div>
  </div>

  <div class="book-row fav">
    <div class="work">Learning to weave</div>
    <div class="author">Deborah Chandler</div>
  </div>  

  <div class="book-row read">
    <div class="work">Inventive Weaving<br>on a Little Loom</div>
    <div class="author">Syne Mitchell</div>
  </div>

  <div class="book-row read">
    <div class="work">Far<br>Beyond the Field</div>
    <div class="author">Makoto Ueda</div>
  </div>

  <div class="book-row manga">
    <div class="work">Goodnight Punpun</div>
    <div class="author">Inio Asano</div>
  </div>

  <div class="book-row reading">
    <div class="work">Nine Gates: Entering the Mind of Poetry</div>
    <div class="author">Jane Hirshfield</div>
  </div>  

  <div class="book-row fav">
    <div class="work">the heart of haiku</div>
    <div class="author">Jane Hirshfield</div>
  </div>

  <div class="book-row reading">
    <div class="work">Welcome to the N.H.K.</div>
    <div class="author">Tatsuhiko Takimoto</div>
  </div>

  <div class="book-row read">
    <div class="work">The Last Children<br>of Tokyo</div>
    <div class="author">Yoko Tawada</div>
  </div>

  <div class="book-row reading">
    <div class="work">One Blade of Grass</div>
    <div class="author">Henry Shukman</div>
  </div>  

  <div class="book-row reading">
    <div class="work">red dragon</div>
    <div class="author">thomas harris</div>
  </div>

  <div class="book-row read">
    <div class="work">Comet in Moominland</div>
    <div class="author">Tove Jansson</div>
  </div>

  <div class="book-row read">
    <div class="work">The Moomins<br>and the Great Flood</div>
    <div class="author">Tove Jansson</div>
  </div>

  <div class="book-row fav">
    <div class="work">Severance</div>
    <div class="author">Ling Ma</div>
  </div>


  <div class="book-row manga">
    <div class="work">Natsume Yūjin-chō</div>
    <div class="author">Yuki Midorikawa</div>
  </div>

  <div class="book-row manga">
    <div class="work">Demon Slayer: Kimetsu no Yaiba</div>
    <div class="author">Koyoharu Gotouge</div>
  </div>

  <div class="book-row read">
    <div class="work">Rocannon’s World</div>
    <div class="author">Ursula K. Le Guin</div>
  </div>

  <div class="book-row read">
    <div class="work">hồn bướm mơ tiên</div>
    <div class="author">khái hưng</div>
  </div>

  <div class="book-row reading">
    <div class="work">The Three-Body Problem</div>
    <div class="author">Liu Cixin</div>
  </div>

  <div class="book-row reading">
    <div class="work">Foucault's Pendulum</div>
    <div class="author">Umberto Eco</div>
  </div>

  <div class="book-row reading">
    <div class="work">Echo on the bay</div>
    <div class="author">Masatsugu Ono</div>
  </div>

  <div class="book-row read">
    <div class="work">Sex at Dawn: The Prehistoric Origins of Modern Sexuality</div>
    <div class="author">Christopher Ryan & Cacilda Jethá</div>
  </div>

  <div class="book-row manga">
    <div class="work">Mushishi</div>
    <div class="author">Yuki Urushibara</div>
  </div>

  <div class="book-row manga">
    <div class="work">Suiiki</div>
    <div class="author">Yuki Urushibara</div>
  </div>

  <div class="book-row reading">
    <div class="work">The Internet of us : knowing more and understanding less in the age of Big Data</div>
    <div class="author">Michael P. Lynch</div>
  </div>

  <div class="book-row reading">
    <div class="work">The Man with the Compound Eyes</div>
    <div class="author">Wu Ming-Yi</div>
  </div>

  <div class="book-row manga">
    <div class="work">Haikyu!!</div>
    <div class="author">Haruichi Furudate</div>
  </div>

  <div class="book-row manga">
    <div class="work">Claymore</div>
    <div class="author">Norihiro Yagi</div>
  </div>

  <div class="book-row manga">
    <div class="work">Yotsuba&!</div>
    <div class="author">Kiyohiko Azuma</div>
  </div>

  <div class="book-row fav">
    <div class="work">Tales from Earthsea</div>
    <div class="author">Ursula K. Le Guin</div>
  </div>

  <div class="book-row fav">
    <div class="work">Braiding Sweetgrass</div>
    <div class="author">Robin Wall Kimmerer</div>
  </div>

  <div class="book-row fav">
    <div class="work">Tehanu</div>
    <div class="author">Ursula K. Le Guin</div>
  </div>
  
  <div class="book-row fav">
    <div class="work">Writing Down the Bones</div>
    <div class="author">Natalie Goldberg</div>
  </div>

  <div class="book-row read">
    <div class="work">On Becoming a Person</div>
    <div class="author">Carl R. Rogers</div>
  </div>

  <div class="book-row fav">
    <div class="work">The Farthest Shore</div>
    <div class="author">Ursula K. Le Guin</div>
  </div>

  <div class="book-row read">
    <div class="work">Wabi Sabi</div>
    <div class="author">Beth Kempton</div>
  </div>

  <div class="book-row read">
    <div class="work">Nuns Having Fun</div>
    <div class="author">Maureen Kelly, Jeffrey Stone</div>
  </div>

  <div class="book-row reading">
    <div class="work">The Mezzanine</div>
    <div class="author">Nicholson Baker</div>
  </div>

  <div class="book-row reading">
    <div class="work">Excellent Advice for Living: Wisdom I Wish I'd Known Earlier</div>
    <div class="author">Kevin Kelly</div>
  </div>

  <div class="book-row fav">
    <div class="work">The Tombs of Atuan</div>
    <div class="author">Ursula K. Le Guin</div>
  </div>

  <div class="book-row fav">
    <div class="work">Upstream: Selected Essays</div>
    <div class="author">Mary Oliver</div>
  </div>

  <div class="book-row reading">
    <div class="work">Cold Nights of Childhood</div>
    <div class="author">Tezer Ozlu</div>
  </div>

  <div class="book-row fav">
    <div class="work">The Collected Songs<br>of Cold Mountain</div>
    <div class="author">Hanshan (translated by Red Pine)</div>
  </div>

  <div class="book-row fav">
    <div class="work">The Vegetarian</div>
    <div class="author">Han Kang</div>
  </div>

  <div class="book-row fav">
    <div class="work">So Late in the Day</div>
    <div class="author">Claire Keegan</div>
  </div>

  <div class="book-row read">
    <div class="work">All About Love:<br>New Visions</div>
    <div class="author">bell hooks</div>
  </div>

  <div class="book-row read">
    <div class="work">Still Life with Oysters and Lemon: On Objects and Intimacy</div>
    <div class="author">Mark Doty</div>
  </div>

  <div class="book-row fav">
    <div class="work">A Wizard of Earthsea</div>
    <div class="author">Ursula K. Le Guin</div>
  </div>

  <div class="book-row read">
    <div class="work">The Summer Book</div>
    <div class="author">Tove Jansson</div>
  </div>

  <div class="book-row fav">
    <div class="work">Human Acts</div>
    <div class="author">Han Kang</div>
  </div>

  <div class="book-row read">
    <div class="work">Hope In The Dark</div>
    <div class="author">Rebecca Solnit</div>
  </div>

  <div class="book-row fav">
    <div class="work">Hour of the Star</div>
    <div class="author">Clarice Lispector</div>
  </div>

  <div class="book-row read">
    <div class="work">The White Book</div>
    <div class="author">Han Kang</div>
  </div>

  <div class="book-row read">
    <div class="work">A Field Guide<br>to Getting Lost</div>
    <div class="author">Rebecca Solnit</div>
  </div>

  <div class="book-row read">
    <div class="work">The Five Invitations: Discovering What Death Can Teach Us about Living Fully</div>
    <div class="author">Frank Ostaseski</div>
  </div>
</div>
</div>

<style>
  body {
  display: flex;
  justify-content: left; 
  align-items: center;     
  min-height: 100vh;  
  margin: 0;
}
.shelf {
  width: 350px;
  margin: 0 auto;
}

.item {
  padding: 0 !important;
}
.item h3 {
  padding: 0 1em !important;
}  
.shelf {
  width: 350px;
}  
.preformatted {
    font-family: monospace; 
    white-space: pre;
    line-height: 1.4;
    font-size: 10.2px;
    margin: 0 auto;
}

.book-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.book-row {
  display: flex;
  align-items: stretch;
  background-color: #fefaf4; 
  font-size: 10px;
  border-top: 0.5px solid #92a0b1;
  border-bottom: 0.5px solid #92a0b1;
  padding: 0 20px;
  margin: 0;
  position: relative;
  width: fit-content;
  cursor: pointer;
  transition: transform 0.2s;
  font-family: "Noto Sans Mono", monospace;
  max-width: 300px;
}

.book-row::before, .book-row::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  background: repeating-linear-gradient(
    to bottom,
    #92a0b1,
    #92a0b1 1px,
    transparent 1px,
    transparent 5px
  );
}

.book-row::before { left: 0; }
.book-row::after  { right: 0; }

.work {
  flex: 1; 
  text-align: center;
  white-space: normal;
  display: flex;
  align-items: center; 
  justify-content: center;
  text-transform: lowercase;
  line-height: 15px;
  padding-left: clamp(2px, 2vw, 5px);
  padding-right: clamp(2px, 2vw, 5px);
}

.author {
  flex: 0 0 30%; 
  color: white;
  text-align: center;
  padding: 0px 5px;
  white-space: normal;
  display: flex;
  align-items: center; 
  text-transform: lowercase;
  line-height: 13px;
  font-size: 9px;
  justify-content: center;
}

.fav .author {
  background-color: #999047; 
}

.fav .work {
  background-color: #d9cf9b;
  color: #665f24;
}

.read .author {
  background-color: #7b92ad; 
}

.read .work {
  background-color: #d4e4f5;
  color: #4b596a; 
}

.reading .author {
  background-color: #70a4b6; 
}

.reading .work {
  background-color: #b0d7d7;
  color: #3f6c7b; 
}

.manga .author {
  background-color: #66a977;
}

.manga .work {
  background-color: #faf0d8;
  color: #447b52;
}

@media screen and (max-width: 500px) {
  .book-row { font-size: 12px; }
  .book-author { font-size: 10px; }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll(".book-row").forEach(row => {
        if (row.offsetWidth / row.parentElement.offsetWidth < 0.9) {
            let shift = Math.random() * 15 + 5; // dịch 5px → 20px
            let direction = Math.random() < 0.5 ? -1 : 1; 
            row.style.transform = `translateX(${shift * direction}px)`;
        }
    });
});
</script>